﻿Ext.define ('rangoaqui.view.phone.Estabelecimento', 
{		
		extend: 'Ext.Container',
		alias: 'widget.EstabelecimentoPage',
		requires: ['Ext.List','Ext.TabPanel','Ext.Map','rangoaqui.utility.SwipeTabs'],		
		config: 
			{	
				
				items: 
				[
					 	 {
							xtype: 'toolbar',
							docked: 'top',
							ui: 'light',
							itemId: 'estab_title_bar',
							items: [
								{
									xtype: 'button',
									text: 'Voltar',
									action: 'goHome',
									ui: 'back'
								},
								{xtype: 'spacer'},
								//{
								//	xtype: 'label',
									//html: "<span style='color: white; font-weight: bold'>Dados da Casa&nbsp;&nbsp;</span>"
								//}
								
							]
						},
						{
							xtype: 'tabpanel',
							plugins: 'swipetabs',
							height: '100%',
							tabBarPosition: 'top',
							tabBar : {
								layout : {
									pack : 'center'
								}
							},
							defaults: {
								styleHtmlContent: true
							},
							items: [
								{ 
									title: 'Promoções',
									items: {
										xtype: 'list',
										height: '100%',
										width: '100%',
										scrollable: true,	
										title: 'Confira as últimas promoções',
										itemId: 'listaPromocoes',
										store: 'Promocoes',
										emptyText : 'Aguarde! Em breve, anunciaremos novas promoções.',
										loadingText: 'Carregando promoções para esta casa!',
										itemTpl: [
											"<div class='promocao'>",
													"<div class='round' style='background: url({url_img}) no-repeat;margin-left: 3px;'></div>",
													"<div class='dados'>",
														"<p><span class='nome'>{nm_promocao}</span></p>",
													"</div>",
												"</div>"
										],//items-promocoes
									}									
								},  // Promocoes
								{ 
									title: 'Detalhes', 
									layout: {
										type : 'vbox',
										pack: 'top',
										align: 'center'
									},
									width: '100%',
									items: [
										{
											xtype: 'panel',
											itemId: 'img_estabelecimento',
											tpl: 
												[
													"<div class='estabelecimento' style='width:100%'>",
														"<div class='round' style='background: url({url_img}) no-repeat;margin-left: 3px; margin-top: 10px'></div>",
												    "</div>"
												]
										},
										{
											xtype: 'panel',
											itemId: 'dados_estabelecimento',
											tpl: 
												[
													"<div class='estabelecimento'>",
														"<div class='dados' style='width:100%;margin-left:0'>",
															"<p class='nome' style='font-size:1.3em;height:10px'>{nm_estabelecimento}</p>",
															'<tpl if="num_indicacoes_geral &gt; 1 ">', // teste para colocar indicacao no plural
																"<p class='bt_blue'><span>{num_indicacoes_geral} indicações</span></p>",
															'<tpl else>', // else
																"<p class='bt_blue'><span>{num_indicacoes_geral} indicação</span></p>",
															"</tpl>", // fim_tpl
															//'<tpl if="num_promocoes_ativas &gt; 1 ">', // teste para colocar promocao no plural
															//	"<p class='bt_red'><span>{num_promocoes_ativas} promoções</span></p>",
														//	'<tpl else>', //else
															//	"<p class='bt_red'><span>{num_promocoes_ativas} promoção</span></p>",
														//	"</tpl>", // fim_tpl	
															"<p class='endereco' style='text-align:center;font-size:1.1em'>{endereco}.<br/>Tel.: {phone}</p>",
														"</div>",
												    "</div>"
												]
										},
									] // items-detalhes
								}, // detalhes
								{ 
									title: 'Mapa',
									items: [
										{
											xtype: 'map',
											width: '100%',
											height: '100%',
											itemId: 'mapa_estabelecimento',
										    useCurrentLocation: false,
										    mapOptions: {
												disableDefaultUI: false,
												zoom: 15,
												mapTypeId: google.maps.MapTypeId.ROADMAP
											}
										}
									] //items-mapa
								} // mapa
							] //items tab panel
						}, //tabpanel
					
					{
						xtype: 'toolbar',
						docked: 'bottom',
						items: [
							{
								xtype: 'button',
								iconCls: 'curtir',
								iconAlign: 'top',
								action: 'indicar',
								text: 'Eu indico'							
							},
							
							{
								xtype: 'spacer'
							},
							{
								xtype: 'button',
								iconCls: 'facebook',
								iconAlign: 'top',
								action: 'showEditUser',
								text: 'Facebook'							
							},
							{
								xtype: 'button',
								iconCls: 'action',
								iconAlign: 'top',
								action: 'doLogout',
								text: 'Sair'					
							}
							
						]
					}
								
				]
			}
});